<template>
  <div class="x-area-box">
    <span>{{text}}</span>
    <span class="triangle" v-show="showTriangle"></span>
  </div>
</template>

<script>
export default {
  name: 'Spinner',

  props: {
    // 是否显示
    province: {
      type: String,
      default: ''
    },

    // 加载中文案
    city: {
      type: String,
      default: ''
    }
  },

  computed: {
    text () {
      let result = '全部'
      this.province && (result += ` > ${this.province}`)
      this.city && (result += ` > ${this.city}`)
      return result
    },

    showTriangle () {
      return this.province || this.city
    }
  }
}
</script>

<style lang="stylus">
@import '../../../assets/stylus/common'

.x-area-box {
  width: 100%;
  height: 52px;
  line-height: 54px;
  cursor: pointer;
  font-size: 12px;

  .triangle {
    triangle(#fff, 10px);
    margin-left: 5px;
  }
}
</style>
